@extends('layouts.app')

@section('title', '账本邀请')

@section('content')
    <div class="">
        <div class="page-header">
            <div class="page-icon">{{ $invitation->book->icon ?? '📘' }}</div>
            <h2 class="page-title">账本邀请</h2>
        </div>

        <div class="invite-content">
            <div class="book-info">
                <h3 class="book-name">{{ $invitation->book->name }}</h3>
                @if($invitation->book->description)
                    <p class="book-description">{{ $invitation->book->description }}</p>
                @endif
            </div>

            <div class="inviter-info">
                <p class="inviter-text">
                    <span class="inviter-name">{{ $invitation->inviter->name }}</span> 邀请您加入此账本
                </p>
            </div>

            <div class="invite-stats">
                <div class="stat-item">
                    <span class="stat-label">成员数量</span>
                    <span class="stat-value">{{ $invitation->book->users()->count() }}人</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">创建时间</span>
                    <span class="stat-value">{{ $invitation->book->created_at->format('Y年m月d日') }}</span>
                </div>
            </div>

            <div class="invite-expires">
                <small class="text-muted">
                    @php
                        $now = \Carbon\Carbon::now();
                        $expiresAt = $invitation->expires_at;
                        $diffHours = $now->diffInHours($expiresAt, false);
                        $diffDays = $now->diffInDays($expiresAt, false);
                    @endphp

                    @if($diffHours <= 0)
                        <span style="color: #e53e3e;">⚠️ 邀请已过期</span>
                    @elseif($diffHours <= 24)
                        邀请将于 <strong>{{ ceil($diffHours) }} 小时后</strong>过期 ({{ $expiresAt->format('Y-m-d H:i') }})
                    @else
                        邀请将于 <strong>{{ ceil($diffDays) }} 天后</strong>过期 ({{ $expiresAt->format('Y-m-d H:i') }})
                    @endif
                </small>
            </div>
        </div>

        <div class="invite-actions">
            @auth
                <button type="button" class="btn btn-primary btn-lg" id="accept-invite">
                    加入账本
                </button>
                <button type="button" class="btn btn-info btn-lg" onclick="window.history.back()">
                    取消
                </button>
            @else
                <div class="login-prompt">
                    <p>请先登录后再加入账本</p>
                    <a href="{{ route('login') }}" class="btn btn-primary btn-lg">登录</a>
                    <a href="{{ route('register') }}" class="btn btn-info btn-lg">注册</a>
                </div>
            @endauth
        </div>
    </div>

    <!-- 加载提示 -->
    <div class="loading-overlay" id="loading-overlay" style="display: none;">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>正在加入账本...</p>
        </div>
    </div>

    @auth
        <script>
            document.getElementById('accept-invite').addEventListener('click', function() {
                const button = this;
                const loadingOverlay = document.getElementById('loading-overlay');

                // 显示加载状态
                button.disabled = true;
                button.textContent = '加入中...';
                loadingOverlay.style.display = 'flex';

                // 发送请求
                fetch('{{ route("invite.accept", $invitation->token) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        loadingOverlay.style.display = 'none';

                        if (data.success) {
                            // 成功加入
                            button.textContent = '加入成功';
                            button.style.background = '#28a745';

                            // 显示成功消息
                            alert('成功加入账本：' + data.book.name);

                            // 跳转到账本页面
                            setTimeout(() => {
                                window.location.href = '{{ route("user.books") }}';
                            }, 1000);
                        } else {
                            // 加入失败
                            button.disabled = false;
                            button.textContent = '加入账本';
                            showError(data.message || '加入失败，请重试', {modal: 1});
                        }
                    })
                    .catch(error => {
                        loadingOverlay.style.display = 'none';
                        button.disabled = false;
                        button.textContent = '加入账本';
                        showError('网络错误，请重试');
                    });
            });
        </script>
    @endauth
@endsection
@push('styles')
    <style>
        .app-container {
            padding-bottom: 0 !important;
        }
        .invite-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            /*padding: 20px;*/
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .invite-card {
            background: white;
            /*border-radius: 20px;*/
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 400px;
            width: 100%;
            overflow: hidden;
            animation: slideUp 0.5s ease-out;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .invite-header {
            text-align: center;
            padding: 20px 20px 10px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .invite-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .invite-title {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }

        .invite-content {
            padding: 30px 20px 0px;
        }

        .book-info {
            text-align: center;
            margin-bottom: 25px;
        }

        .book-name {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin: 0 0 10px 0;
        }

        .book-description {
            color: #666;
            margin: 0;
            line-height: 1.5;
        }

        .inviter-info {
            text-align: center;
            margin-bottom: 25px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .inviter-text {
            margin: 0;
            color: #555;
        }

        .inviter-name {
            font-weight: 600;
            color: #333;
        }

        .invite-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .stat-item {
            text-align: center;
            flex: 1;
        }

        .stat-label {
            display: block;
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }

        .stat-value {
            display: block;
            font-weight: 600;
            color: #333;
        }

        .invite-expires {
            text-align: center;
            margin-bottom: 20px;
        }

        .invite-actions {
            padding: 0 20px 30px;
        }

        .login-prompt {
            text-align: center;
        }

        .login-prompt p {
            margin-bottom: 20px;
            color: #666;
        }

        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 10px;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-outline {
            background: transparent;
            color: #666;
            border: 2px solid #ddd;
        }

        .btn-outline:hover {
            background: #f8f9fa;
            border-color: #ccc;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-spinner {
            text-align: center;
            color: white;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .text-muted {
            color: #6c757d;
        }

        @media (max-width: 480px) {
            .invite-card {
                margin: 0;
            }

            .invite-stats {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
@endpush

